import React from "react";

class ControlledModule extends React.Component {
    constructor() {
        super();
        this.inputChange = this.inputChange.bind(this);
    }

    state = {
        txt: ''
    }


    inputChange(e) {
        let target = e.target;
        let value = target.type === 'checkbox' ? target.checked : target.value;
        this.setState({
            [e.target.name]: value
        })
    }

    render() {
        console.log(this.state);

        return (
            <div>
                {/* 把state的值设置给输入框的value，绑定change事件，这样用户在输入内容的时候调用相应函数，在函数里面把当前设置的值赋值给state，从而达到数据的统一 */}
                <input type="text" value={this.state.txt} name="txt" onChange={this.inputChange}/>
                <input type="checkbox" value={this.state.isChecked} name="isChecked" onChange={this.inputChange}/>
            </div>
        )
    }
}

export default ControlledModule;